<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<script>
			function displayDate() 
			{
				document.getElementById("demo").innerHTML = Date();
			}
			function myFunction() {
				    document.getElementById("demo2").innerHTML += "Moused over!<br>"
			}
			function mySecondFunction() {
					document.getElementById("demo2").innerHTML += "Clicked!<br>"
			}
			function myThirdFunction() {
					document.getElementById("demo2").innerHTML += "Moused out!<br>"
			}
		</script>
		<style>
			div {
				background-color: coral;
				border: 1px solid;
				padding: 50px;
			}
		</style>
	</head>
	<body>

		<!--addEventListener & removeEventListener-->
		<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
		<button id="myBtn">点我</button>
		<p id="demo"></p>
		<script>
			document.getElementById("myBtn").addEventListener("click", displayDate);
			document.getElementById("myBtn").addEventListener("click", function(){alert("Hello World!");});
		</script>

		<!--你可以向同个元素添加不同类型的事件-->
		<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
		<button id="myBtn2">点我</button>
		<p id="demo2"></p>
		<script>
			var x = document.getElementById("myBtn2");
			x.addEventListener("mouseover", myFunction);
			x.addEventListener("click", mySecondFunction);
			x.addEventListener("mouseout", myThirdFunction);
		</script>

		<!--向 Window 对象添加事件句柄-->
		<p>实例在 window 对象中使用 addEventListener() 方法。</p>
		<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
		<p id="demo3"></p>
		<script>
			window.addEventListener("resize", function(){
					document.getElementById("demo3").innerHTML = Math.random();
			});
		</script>

		<!--传递参数-->
		<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
		<p>点击按钮执行计算。</p>
		<button id="myBtn5">点我</button>
		<p id="demo5"></p>
		<script>
			var p1 = 5;
			var p2 = 7;
			document.getElementById("myBtn5").addEventListener("click", function() {myFunction4(p1, p2);});
			function myFunction4(a, b) {
				var result = a * b;
				document.getElementById("demo5").innerHTML = result;
			}
		</script>

		<!--
		   -事件冒泡或事件捕获？
		   -在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
		   -在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件
		   -     addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
		   -     addEventListener(event, function, useCapture);
		   -->
		<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
		<div id="myDiv1">
			<p id="myP1">点击段落，我是冒泡。</p>
		</div><br>
		<div id="myDiv2">
			<p id="myP2">点击段落，我是捕获。 </p>
		</div>
		<script>
			document.getElementById("myP1").addEventListener("click", function() {
					alert("你点击了 P1 元素!");
			}, false);
			document.getElementById("myDiv1").addEventListener("click", function() {
					alert(" 你点击了 DIV1 元素 !");
			}, false);
			document.getElementById("myP2").addEventListener("click", function() {
					alert("你点击了 P2 元素!");
			}, true);
			document.getElementById("myDiv2").addEventListener("click", function() {
					alert("你点击了 DIV2 元素 !");
			}, true);
		</script>

		 <!--removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:-->
		 <!--element.removeEventListener("mousemove", myFunction);-->

	</body>
</html>
